<!--
* @description 2020平台年报
* @author zywu
* @date 2021/01/05 10:56:41
!-->
<template>
  <div :class="{ 'in-frame':inFrame }" class="page-wrapper page-box" :style="{ backgroundImage:backgroundImage }">
    <img
      v-if="active>0&&active<lastPageIndex-1"
      src="/ilink-app-h5-zd/static/img/ilink_1578395699904.png"
      alt
      class="slide-icon"
      @click="handleSlide()"
    />
    <img
      class="btn-audio"
      :class="{ 'audio-playing':!audioPaused }"
      :src="audioPaused?iconAudioPaused:iconAudioPlaying"
      @click="handlePlayAudio"
    />
    <audio ref="audio" src="/ilink-app-h5-zd/static/img/ilink_1578636140500.mp3" loop autoplay style="display: none;"></audio>

    <div class="page-inner" :style="{transform:transform}">
      <cover :org-name="orgName" @start="handleStart" :report-data="reportData"></cover>
      <join :active="active==1" :report-data="reportData"></join>
      <units :active="active==2" :report-data="reportData"></units>
      <facilities :active="active==3" :report-data="reportData"></facilities>
      <danger-signal :active="active==4" :report-data="reportData"></danger-signal>
      <trouble :active="active==5" :report-data="reportData"></trouble>
      <hidden-danger :active="active==6" :report-data="reportData"></hidden-danger>
      <maintain :active="active==7" :report-data="reportData"></maintain>
      <safety-unit :active="active==8" :report-data="reportData"></safety-unit>
      <hard-working :active="active==9" :report-data="reportData"></hard-working>
      <efficient :active="active==10" :report-data="reportData"></efficient>
      <rescure v-if="showRescure" :active="active==11" :report-data="reportData"></rescure>
      <house-safe v-if="showHouseSafe" :active="showRescure?active==12:active==11" :report-data="reportData"></house-safe>
      <end :active="active==lastPageIndex-1" @share="handleSlide" :report-data="reportData"></end>
      <share :active="active==lastPageIndex" :report-data="reportData"></share>
    </div>
  </div>
</template>

<script>
import { loadEcharts, loadEchartsGL } from '@/utils/loadEcharts'
import Cover from './cover'
import Join from './join'
import Units from './units'
import Facilities from './facilities'
import DangerSignal from './dangerSignal'
import Trouble from './trouble'
import HiddenDanger from './hiddenDanger'
import Maintain from './maintain'
import SafetyUnit from './safetyUnit'
import HardWorking from './hardWorking'
import Efficient from './efficient'
import Rescure from './rescure'
import HouseSafe from './houseSafe'
import End from './end'
import Share from './share'
import { getPlatFormYearReport } from '@/api/yearReport'
let pageHeight = 736
let pageBox = null
let pageItem = []
let touchStart = 0
let maxMove = 50
export default {
  components: {
    Cover,
    Join,
    Units,
    Facilities,
    DangerSignal,
    Trouble,
    HiddenDanger,
    Maintain,
    SafetyUnit,
    HardWorking,
    Efficient,
    Rescure,
    HouseSafe,
    End,
    Share,
  },
  data() {
    return {
      audioPaused: false,
      iconAudioPlaying: '/ilink-app-h5-zd/static/img/ilink_1578635133524.png',
      iconAudioPaused: '/ilink-app-h5-zd/static/img/ilink_1578636317658.png',
      orgName: '',
      active: 0,
      reportData: {
        joinTime: {},
        hiddenDanger: {},
      },
      pageNum: 15,
      inFrame: false,
      showRescure: true,
      showHouseSafe: true,
    }
  },
  computed: {
    transform() {
      return 'translateY(-' + this.height * this.active + 'px)'
    },
    backgroundImage() {
      if (
        (this.active >= 8 && this.active <= 12) ||
        this.active == this.lastPageIndex
      ) {
        //排名页面无默认图
        return 'none'
      } else if (this.active == this.pageNum - 2) {
        //晒一晒
        return 'url(/ilink-app-h5-zd/static/img/ilink_1578621303702.jpg)'
      }
      return 'url(/ilink-app-h5-zd/static/img/ilink_1578621454168.png)' //默认背景
    },
    lastPageIndex() {
      return this.pageNum - 1
    },
  },
  created() {
    loadEcharts().then(() => {
      loadEchartsGL().then(() => {
        this.getData()
      })
    })
    this.inFrame = !!this.$route.query.inFrame
    // this.pageHeight = document.documentElement.clientHeight-(this.inFrame?43:0)
    window.aaa = (index = 0) => {
      this.active = index
    }
  },
  mounted() {
    pageItem = document.getElementsByClassName('section') //3
    pageBox = document.getElementsByClassName('page-box')
    this.addTouchEvent()

    window.onresize = () => {
      this.computeHeight()
    }
    this.computeHeight()
  },
  methods: {
    computeHeight() {
      if (window != top) {
        var u = navigator.userAgent
        if (u.indexOf('iPhone') > -1 || u.indexOf('iOS') > -1) {
          this.height = Number(window.document.body.offsetHeight + 38)
        } else {
          this.height = Number(document.documentElement.clientHeight)
        }
      } else {
        this.height = Number(document.documentElement.clientHeight)
      }
      Array.prototype.forEach.call(pageItem, (element, i) => {
        element.style = 'height:' + this.height + 'px'
      })
      document.querySelector('.page-box').style.height = this.height + 'px'
    },
    getData() {
      getPlatFormYearReport({
        id: this.$route.query.reportId || 4590,
      }).then((res) => {
        let data = JSON.parse(JSON.parse(this.xxbubs(res.data)))
        this.orgName = data.orgName
        this.reportData = data
        this.showRescure =
          this.reportData.openOrgTop &&
          this.reportData.openOrgTop.dataList.length > 0
        this.showHouseSafe =
          this.reportData.securityOrgTop &&
          this.reportData.securityOrgTop.dataList.length > 0
        if (!this.showRescure) this.pageNum--
        if (!this.showHouseSafe) this.pageNum--
        console.log(data)
      })
    },
    xxbubs(str) {
      str = str.replace('f6ae12c1671b4ce48c3f90e9dd9d7608', '')
      return decodeURIComponent(
        atob(str)
          .split('')
          .map(function (c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2)
          })
          .join('')
      )
    },
    handleStart() {
      this.handleSlide()
    },
    handlePlayAudio() {
      this.audioPaused = !this.audioPaused
      this.$refs.audio[this.audioPaused ? 'pause' : 'play']()
    },
    handleSlide(step = 1) {
      this.active = this.active + step
    },
    addTouchEvent() {
      pageBox[0].addEventListener(
        'touchstart',
        (e) => {
          touchStart = e.changedTouches[0].clientY
          if (this.active > 0) {
            //首页关闭滑动事件
            pageBox[0].addEventListener(
              'touchmove',
              this.touchmovehandle,
              false
            )
            pageBox[0].addEventListener('touchend', this.touchendhandle, false)
          }
        },
        false
      )
    },
    touchendhandle() {
      touchStart = 0
      this.removeEvent()
    },
    removeEvent() {
      pageBox[0].removeEventListener('touchmove', this.touchmovehandle)
      pageBox[0].removeEventListener('touchend', this.touchendhandle)
    },
    touchmovehandle(e) {
      var clientY = e.changedTouches[0].clientY
      var changeIndex = clientY > touchStart ? -1 : 1
      if (
        Math.abs(clientY - touchStart) > maxMove &&
        this.active + changeIndex >= 0 &&
        this.active + changeIndex <= this.pageNum - 1
      ) {
        touchStart = 0
        this.handleSlide(changeIndex)
        this.removeEvent()
      }
    },
  },
}
</script>